<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus and toolbars in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Winforms, Mono, IronPython, menus, toolbars, programming, tutorial">
<meta name="description" content="Menus and toolbars in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Menus and toolbars in Mono Winforms</h1>


<p>
In this part of the IronPython Mono Winforms tutorial, we will talk 
about menus and toolbars. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A menubar is one of the most visible parts of the GUI application. It is a 
group of commands located in various menus. While in console applications 
you had to remember all those arcane commands, here we have most of the commands 
grouped into logical parts. There are accepted standards that further reduce 
the amount of time spending to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In the first example, we create a simple menu. 
</p>

<div class="codehead">simplemenu.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import Keys, MenuStrip, ToolStripMenuItem
from System.Drawing import Size

class IForm(Form):

    def __init__(self):
        self.Text = 'Simple Menu'
        self.Size = Size(250, 200)

        ms = MenuStrip()
        ms.Parent = self
        
        filem = ToolStripMenuItem("&amp;File")         
        exit = ToolStripMenuItem("&amp;Exit", None,
            self.OnExit)  
        exit.ShortcutKeys = Keys.Control | Keys.X
        filem.DropDownItems.Add(exit)

        ms.Items.Add(filem)
        self.MainMenuStrip = ms
        
        self.CenterToScreen()
    

    def OnExit(self, sender, event):
        self.Close()
    

Application.Run(IForm())
</pre>

<p>
In our example, we have a menubar and one menu. Inside a menu there is one 
menu item. If we select the menu item, 
application is closed. 
</p>

<p>
Notice the ways how we can close the application. We can close it by using the
Ctrl+X shorcut or by pressing Alt, F, E keys. 
</p>

<pre class="explanation">
 ms = MenuStrip()
</pre>

<p>
<b class="keyword">MenuStrip</b> creates a menu system for our form. We add 
<b class="keyword">ToolStripMenuItem</b> objects to the MenuStrip that represent 
the individual menu commands in the menu structure. Each <b class="keyword">ToolStripMenuItem</b> 
can be a command for your application or a parent menu for other submenu items.
</p>

<pre class="explanation">
 filem = ToolStripMenuItem("&amp;File")           
</pre>

<p>
Here we create a menu.
</p>

<pre class="explanation">
 exit = ToolStripMenuItem("&amp;Exit", None,
     self.OnExit)     
</pre>

<p>
This line creates the exit menu item.
</p>

<pre class="explanation">
 exit.ShortcutKeys = Keys.Control | Keys.X
</pre>

<p>
We provide a shortcut for the exit menu item.
</p>

<pre class="explanation">
 filem.DropDownItems.Add(exit)
</pre>

<p>
The exit menu item is added to the drop down items of the menu object. 
</p>

<pre class="explanation">
 ms.Items.Add(filem)   
</pre>

<p>
Here we add the menu object into the menu strip. 
</p>

<pre class="explanation">
 self.MainMenuStrip = ms
</pre>

<p>
The <b class="keyword">MenuStrip</b> is plugged into the form. 
</p>


<br>
<img src="/img/gui/ironpython/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
Each menu item can also have a submenu. This way we can group similar commnads into groups.
For example we can place commands that hide/show various toolbars like personal bar,
address bar, status bar or navigation bar into a submenu called toolbars.
</p>

<div class="codehead">submenu.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import MenuStrip, ToolStripMenuItem
from System.Drawing import Size

class IForm(Form):

    def __init__(self):
        self.Text = 'Simple Menu'
        self.Size = Size(380, 200)

        ms = MenuStrip()
        ms.Parent = self

        filem = ToolStripMenuItem("&amp;File")
        exit = ToolStripMenuItem("&amp;Exit", None,
            self.OnExit)

        importm = ToolStripMenuItem()
        importm.Text = "Import"

        filem.DropDownItems.Add(importm)

        temp = ToolStripMenuItem()
        temp.Text = "Import newsfeed list..."
        importm.DropDownItems.Add(temp)

        temp = ToolStripMenuItem()
        temp.Text = "Import bookmarks..."
        importm.DropDownItems.Add(temp)

        temp = ToolStripMenuItem()
        temp.Text = "Import mail..."
        importm.DropDownItems.Add(temp)

        filem.DropDownItems.Add(exit)

        ms.Items.Add(filem)
        self.MainMenuStrip = ms
        
        self.CenterToScreen()
    

    def OnExit(self, sender, event):
        self.Close()
    

Application.Run(IForm())
</pre>

<p>
In this example, we create one submenu. The submenu Import has three menu items. 
</p>

<pre class="explanation">
 importm = ToolStripMenuItem()
 importm.Text = "Import"
</pre>

<p>
A <b class="keyword">ToolStripMenuItem</b> can be a menu or a menu item. 
Here it will act as a submenu.
</p>

<pre class="explanation">
 temp = ToolStripMenuItem()
 temp.Text = "Import newsfeed list..."
 importm.DropDownItems.Add(temp)
</pre>

<p>
Here we create a menu item and add it to the Import submenu.
</p>


<br>
<img src="/img/gui/ironpython/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Check menu item</h2>

<p>
The next code example demonstrates, how to create a checked menu item. 
</p>

<div class="codehead">checkmenuitem.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, StatusBar
from System.Windows.Forms import Shortcut, MainMenu, MenuItem
from System.Drawing import Size



class IForm(Form):

    def __init__(self):
        self.Text = 'Simple Menu'
        
        self.sb = StatusBar()
        self.sb.Parent = self
        self.sb.Text = "Ready"

        mainMenu = MainMenu()

        filem = mainMenu.MenuItems.Add("&amp;File")    
        filem.MenuItems.Add(MenuItem("E&amp;xit", 
                 self.OnExit, Shortcut.CtrlX))

        view = mainMenu.MenuItems.Add("&amp;View")
        self.viewStatusBar = MenuItem("View StatusBar")
        self.viewStatusBar.Checked = True
        self.viewStatusBar.Click += self.ToggleStatusBar
        view.MenuItems.Add(self.viewStatusBar)

        self.Menu = mainMenu
        self.Size = Size(250, 200)

        self.CenterToScreen()
    
    def OnExit(self, sender, event):
        self.Close()


    def ToggleStatusBar(self, sender, event):
        check = self.viewStatusBar.Checked

        if (check):
            self.sb.Visible = False
            self.viewStatusBar.Checked = False
        else:
            self.sb.Visible = True
            self.viewStatusBar.Checked = True
        
    
Application.Run(IForm())
</pre>

<p>
We have two menus. File and View. The View menu has a menu item that 
toggles the visibility of
the statusbar. 
</p>

<pre class="explanation">
 mainMenu = MainMenu()
</pre>

<p>
In this example, we use the <b class="keyword">MainMenu</b> control. 
To create a menubar, we can use either
<b class="keyword">MainMenu</b> or <b class="keyword">MenuStrip</b> controls. 
The latter has some additional 
functionality.
</p>

<pre class="explanation">
 self.viewStatusBar.Checked = True
</pre>

<p>
This menu item is checked by default, because the statusbar is visible 
from the start of the application.
</p>

<pre class="explanation">
 check = self.viewStatusBar.Checked

 if (check):
     self.sb.Visible = False
     self.viewStatusBar.Checked = False
 else:
     self.sb.Visible = True
     self.viewStatusBar.Checked = True
</pre>

<p>
We determine, if the menu item is checked. We show and hide the statusbar 
and the check tick depending on the <b class="keyword">check</b> value. 
</p>

<br>
<img src="/img/gui/ironpython/checkmenuitem.png" alt="Check menu item">
<div class="figure">Figure: Check menu item</div>


<h2>Images, separator</h2>

<p>
We will further enhance our knowledge of the <b class="keyword">MenuStrip</b> control. 
We will create a menu item with an image and show how to separate them with a separator. 
</p>

<div class="codehead">menustrip.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form, MenuStrip
from System.Windows.Forms import ToolStripMenuItem, ToolStripSeparator
from System.Drawing import Size, Image

class IForm(Form):

    def __init__(self):
        self.Text = 'MenuStrip'
        self.Size = Size(250, 200)

        menuStrip = MenuStrip()
   
        titem1 = ToolStripMenuItem("File")
        menuStrip.Items.Add(titem1)
  
        titem2 = ToolStripMenuItem("Tools")
        menuStrip.Items.Add(titem2)
  
        subm1 = ToolStripMenuItem("New")
        subm1.Image = Image.FromFile("new.png")
        titem1.DropDownItems.Add(subm1)
   
        subm2 = ToolStripMenuItem("Open") 
        subm2.Image = Image.FromFile("open.png")
        titem1.DropDownItems.Add(subm2)
  
        titem1.DropDownItems.Add(ToolStripSeparator())

        subm3 = ToolStripMenuItem("Exit")
        subm3.Image = Image.FromFile("exit.png")
        titem1.DropDownItems.Add(subm3)  
  
        subm3.Click += self.OnExit
        self.Controls.Add(menuStrip)
        self.MainMenuStrip = menuStrip 
        
        self.CenterToScreen()
    

    def OnExit(self, sender, event):
        self.Close()
    

Application.Run(IForm())
</pre>

<p>
We have two menus in our code example. File and Tools. In the File we 
have three menu items with images. We have also one separator.
In this example, the png images must be located in the current working directory.
</p>


<pre class="explanation">
 subm1 = ToolStripMenuItem("New")
 subm1.Image = Image.FromFile("new.png")
 titem1.DropDownItems.Add(subm1)
</pre>

<p>
Here we create the first menu item. To add an image to the item, we set the
<b class="keyword">Image</b> property to our image. We create an Image from the 
specified file using the <b class="keyword">FromFile()</b> method. 
</p>


<pre class="explanation">
 titem1.DropDownItems.Add(ToolStripSeparator())
</pre>

<p>
Here we add a separator to the File menu. 
</p>


<br>
<img src="/img/gui/ironpython/menustrip.png" alt="MenuStrip">
<div class="figure">Figure: Images and separator</div>


<h2>ToolBar</h2>

<p>
Menus group all commands that we can use in an application. Toolbars 
provide a quick access to the most frequently used commands.
<b class="keyword">ToolBar</b> control is used to display 
<b class="keyword">ToolBarButton</b> controls. We can assign images 
to the buttons by creating an <b class="keyword">ImageList</b>. We than 
assign the image list to the <b class="keyword">ImageList</b> property of 
the toolbar and assign the image index value to the <b class="keyword">ImageIndex</b> 
property for each <b class="keyword">ToolBarButton</b>.
</p>

<div class="codehead">toolbar.py</div>
<pre class="code">
#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")
clr.AddReference("System")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import ToolBar, ToolBarButton, ImageList
from System.Drawing import Size, Icon



class IForm(Form):

    def __init__(self):
        self.Text = 'Simple ToolBar'
        self.Size = Size(250, 200)

        toolBar = ToolBar()
        toolBarIcons = ImageList()
        save = ToolBarButton()
        exit = ToolBarButton()

        save.ImageIndex = 0
        save.Tag = "Save"
        exit.ImageIndex = 1
        exit.Tag = "Exit"

        toolBar.ImageList = toolBarIcons
        toolBar.ShowToolTips = True
        toolBar.Buttons.AddRange((save, exit))
        toolBar.ButtonClick += self.OnClicked
    
        toolBarIcons.ImageSize = Size(16, 16)
        toolBarIcons.Images.Add(Icon("new.ico"))
        toolBarIcons.Images.Add(Icon("exit.ico"))

        self.Controls.Add(toolBar)
        self.CenterToScreen()
    
    def OnClicked(self, sender, event):
        if event.Button.Tag == "Exit":
            self.Close()
    

Application.Run(IForm())
</pre>

<p>
In our example, we show two buttons on the toolbar. 
</p>

<pre class="explanation">
 toolBar = ToolBar()
</pre>

<p>
 Here we create the <b class="keyword">ToolBar</b> control. 
</p>

<pre class="explanation">
 toolBarIcons = ImageList()
</pre>

<p>
An image list is created. 
</p>

<pre class="explanation">
 save = ToolBarButton()
 exit = ToolBarButton()
</pre>

<p>
These are two toolbar buttons. 
</p>

<pre class="explanation">
 save.ImageIndex = 0
</pre>

<p>
We determine which icon from the image list will be used for the save toolbar button. 
</p>

<pre class="explanation">
 toolBar.Buttons.AddRange((save, exit))
</pre>

<p>
The <b class="keyword">ToolBarButton</b> controls are added to the toolbar. 
</p>

<pre class="explanation">
 toolBarIcons.Images.Add(Icon("new.ico"))
 toolBarIcons.Images.Add(Icon("exit.ico"))
</pre>

<p>
Icons are added to the image list.
</p>

<pre class="explanation">
 if event.Button.Tag == "Exit":
     self.Close()
</pre>

<p>
If the tag of the button equals to "Exit", we close the application. 
</p>

<br>
<img src="/img/gui/ironpython/toolbar.png" alt="ToolBar">
<div class="figure">Figure: ToolBar</div>

<hr class="btm">

<p>
This part of the IronPython Winforms tutorial was about menus and toolbars. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 28, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

